<template>
  <!-- 修改资料 -->
  <div class="tsDialog">
    <el-dialog :model-value="dialogVisible" :width="width" :fullscreen="fullscreen" :top="top"  @closed="close"
      :modal="show_modal" :close-on-click-modal="clickModel" :draggable="draggable" @open="openDiaolog">
      <template #header>
        <span class="el-dialog__title" v-html="title"></span>
        <button v-if="width !== '100%'" class="el-dialog__headerbtn screen_btn">
          <el-icon title="最大化" v-if="fullscreen === false" class="el-dialog__close" @click="fullscreen = true">
            <FullScreen />
          </el-icon>
          <el-icon title="还原" v-else class="el-dialog__close" @click="fullscreen = false">
            <CopyDocument />
          </el-icon>
        </button>
      </template>
      <div class="sketch_content">
        <template v-if="slots.default">
          <div>
            <slot></slot>
          </div>
        </template>
      </div>
      <!-- <template #footer>
        <slot name="footer"></slot>
      </template> -->
    </el-dialog>

  </div>
</template>
<script setup>
import { ref, toRefs, onMounted, watch, useSlots,computed } from 'vue';
import { FullScreen, CopyDocument } from '@element-plus/icons-vue'
const emit = defineEmits(['close'])
const slots = useSlots();
const props = defineProps({
  content: {
    type: [String, Function, Object],
    default: '无'
  },
  title: {
    type: String,
    default: '',
  },
  model_value: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '50%'
  },
  modal: {
    type: Boolean,
    default: false
  },
  draggable: {
    type: Boolean,
    default: true
  },
  close_on_click_modal: {
    type: Boolean,
    default: false
  },
  top: {
    type: String,
    default: ''
  },
  fullScreen: {
    type: Boolean,
    default: false
  },
  destory: {
    type: Function,
    default: function () { }
  }
})
//最大化与还原设置

const show_modal = ref()  //是否显示遮罩层
const fullscreen = ref(props.fullScreen)
const clickModel = ref()
const dialogVisible = ref(false)
const { model_value, close_on_click_modal, modal, fullScreen } = toRefs(props)
show_modal.value = modal.value
clickModel.value = close_on_click_modal.value
dialogVisible.value = model_value.value
// fullscreen.value = fullScreen.value
//弹窗是否可见
const h = computed(()=>{
  let height
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (!iOS) {
            height = window.innerHeight
        }
        else {
            height = screen.height
        }
        return height*0.88
})
watch(model_value, (newValue) => {
  dialogVisible.value = newValue
})
watch(fullscreen, (newValue) => {
  const box1 = document.querySelectorAll(".sketch_content")[0]
  const box2 = document.querySelectorAll(".footer")[0]
  console.log(newValue)
  if (newValue == true) {
    box1.style.maxHeight = h.value+'px'
    console.log(box1.style.maxHeight)
    if (box2) {
      box2.style.position = 'fixed'
    }
  }
  else {
    box1.style.maxHeight = '500px'
  }
})
onMounted(() => {
  const box = document.querySelectorAll(".el-overlay-dialog")
  for (let i = 1; i < box.length; i++) {
    if (!box[i].parentNode.getAttribute('class')) {
      box[i].parentNode.style.pointerEvents = "none"
    }
  }


})
const openDiaolog = () => {
  const box1 = document.querySelectorAll(".sketch_content")[0]
  const box2 = document.querySelectorAll(".footer")[0]
  if (fullscreen.value == true) {
    box1.style.maxHeight = String(h.value)+'px'
    if (box2) {
      box2.style.position = 'fixed'
    }
  }
  else {
    box1.style.maxHeight = '500px'
  }
}

/**
 * 获取内容
 * <p>
 * @param content 文本 / 方法
 */
const renderContent = (content) => {
  if (content instanceof Function) {
    return content();
  }
  return content
};

// const toggleScreen = () => {
//   fullscreen.value = !fullscreen.value
//   const box = document.querySelectorAll(".sketch_content")[0]
//   const box2 = document.querySelectorAll(".footer")[0]
//   if (fullscreen.value == true) {
//     box.style.maxHeight = '900px'
//     if (box2) {

//       box2.style.position = 'fixed'
//     }
//   }
//   else {
//     box.style.maxHeight = '500px'
//   }

// }



const close = () => {
  dialogVisible.value = false
}
const open = () => {
  dialogVisible.value = true
}
defineExpose({ open, close });
</script>

<style lang="less" scoped>
.tsDialog {
  :deep(.el-dialog__header) {
    padding: 15px 15px !important;
    position: relative !important;
    margin-right: 0 !important;
    background-color: #f6f6f6;
  }

  :deep(.el-dialog) {
    pointer-events: auto !important;
  }
  :deep(.el-dialog__title) {
    font-size: 15px !important;
    line-height: 16px !important;
  }

  :deep(.el-dialog__headerbtn) {
    top: 8px;
    right: 10px;
    width: 22px !important;
    height: 30px !important;
    font-size: 18px;
    text-align: center;
  }

  :deep(.el-dialog__footer) {
    padding: 10px 10px;
    background-color: #f6f6f6;
    text-align: center;
  }
}



.screen_btn {
  border: 0 !important;
  color: var(--el-color-info) !important;
  position: absolute;
  cursor: pointer;
  font-size: 14px !important;
  right: 32px !important;
}

.screen_btn:active,
.screen_btn:link,
.screen_btn:visited,
.screen_btn:focus {
  color: var(--el-color-info) !important;
}



.sketch_content {
  // 必须有高度 overflow 为自动
  overflow: auto;
  max-height: 500px;
  overflow-x: hidden;

  // 滚动条的样式,宽高分别对应横竖滚动条的尺寸
  &::-webkit-scrollbar {
    width: 3px;
  }

  // 滚动条里面默认的小方块,自定义样式
  &::-webkit-scrollbar-thumb {
    background: #909399;
    border-radius: 2px;
  }

  // 滚动条里面的轨道
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
</style>

